  // localStorage.setItem('x-token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMy0wNi0xNSAwNzo1ODo1OCIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIl19LCJpYXQiOjE2ODY5NzYzMjV9.ChIycR1f9_Tk4uAH31j0fQkQ0iAawzTkJxt_fa2XFzs')
  const query = {
    advposdesc: '',
    advposname: '',
    page: '',
    limit: ''
  }
  async function getAdv() {
    const { data: { data } } = await axios.get('/ydd_advpos/list', {
      params: query
    })
    console.log(data);
    document.querySelector('#tbody').innerHTML = data.data.map((item, index) => `
    <tr>
                <td>${index}</td>
                <td>${item.advposname}</td>
                <td>${item.advposdesc}</td>
                <td>${item.default_data}</td>
                <td>${item.advpossize}</td>
                <td>
                  <button type="button" data-id=${item.id} class="layui-btn layui-btn-xs btn_edit">编辑</button>
                  <button type="button" data-id=${item.id} class="layui-btn layui-btn-xs layui-btn-danger btn_delete">删除</button>
                </td>
              </tr>
    `).join('')
    renderPage(data.count)
  }
  getAdv()
  // 用layui分页
  const laypage = layui.laypage
  function renderPage(total) {
    laypage.render({
      elem: 'page-box',
      count: total,
      curr: query.page,//显示高亮
      limit: query.limit,
      limits: [1, 2, 3, 5, 8, 10],
      layout: ['count', 'limit', 'prev', 'next', 'page', 'skip'],
      jump: function (obj, first) {
        // jump触发的时机：分页渲染的时候也会触发,但是触发时，first的值不同,所以点击分页时log会执行两次
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数
        console.log(first);

        query.page = obj.curr
        query.limit = obj.limit
        //首次不执行
        if (!first) {
          //do something
          getAdv()
        }
      }
    })
  }
  document.querySelector('#advTitle').addEventListener('submit', function (e) {
    e.preventDefault()
    // console.log(2);
    query.advposname = document.querySelector('#advSearch').value
    query.page = 1
    getAdv()
  })

  // 添加
  let advAlert
  document.querySelector('#advpReset').addEventListener('click', function () {
    advAlert = layer.open({
      content: `<form id="addForm" class="layui-form">
        <!-- 第一行 广告位名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告位名称</label>
          <div class="layui-input-block">
            <input type="text" name="advposname" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 广告位描述  -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告位描述</label>
          <div class="layui-input-block">
            <input type="text" name="advposdesc" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 广告位尺寸  -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告位尺寸</label>
          <div class="layui-input-block">
            <input type="text" name="advpossize" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">取消</button>
          </div>
        </div>
      </form>`,//内容
      type: 1,//弹出层类型
      title: '添加广告位',//标题
      area: ['500px', '250px']//宽高
    })
  })

  // 添加功能
 $('body').on('click','#addForm',async function (e)   {
    e.preventDefault()
    // console.log(e);
   
      const data = serialize(document.querySelector('#addForm'), { hash: true })
      console.log(data);

      const addAdv = await axios.post('/ydd_advpos/add', data)
      if (!addAdv.data.errno)
        // console.log(addAdv);
        layer.msg('添加成功')
      layer.close(advAlert)
      getAdv()
    
  })


  // 编辑
  let advAlert2
  let form = layui.form
  document.querySelector('#tbody').addEventListener('click', async function (e) {
    e.preventDefault()

    if (e.target.classList.contains('btn_edit')) {
      console.log(e.target);
      advAlert2 = layer.open({
        content: `<form id="editForm" lay-filter="formEdit" class="layui-form">
          <!--  id名称 -->
        <div class="layui-form-item" style="display:none;">
          <label class="layui-form-label">广告位名称</label>
          <div class="layui-input-block">
            <input type="text" name="id" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第一行 广告位名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告位名称</label>
          <div class="layui-input-block">
            <input type="text" name="advposname" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 广告位描述  -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告位描述</label>
          <div class="layui-input-block">
            <input type="text" name="advposdesc" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 广告位尺寸  -->
        <div class="layui-form-item">
          <label class="layui-form-label">广告位尺寸</label>
          <div class="layui-input-block">
            <input type="text" name="advpossize" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!--  default_data  -->
        <div class="layui-form-item" style="display:none;">
          <label class="layui-form-label">广告位尺寸</label>
          <div class="layui-input-block">
            <input type="text" name="default_data" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>`,//内容
        type: 1,//弹出层类型
        title: '编辑广告位',//标题
        area: ['500px', '250px']//宽高
      })
      const id = e.target.dataset.id
      const advCom = await axios.get('/ydd_advpos/rowInfo', { params: { id } })
      console.log(advCom);
      form.val('formEdit', advCom.data.data)
    }
  })

  document.querySelector('body').addEventListener('submit', async function (e) {
    e.preventDefault()
    if (e.target = 'form#editForm.layui-form') {
      const data = serialize(document.querySelector('#editForm'), { hash: true })
      console.log(data);

      const addAdv = await axios.post('/ydd_advpos/update', data)
      if (!addAdv.data.errno)
        // console.log(addAdv);
        layer.msg('添加成功')
      layer.close(advAlert2)
      getAdv()
    }

  })


  // 删除
  document.querySelector('#tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('btn_delete')) {
      layer.confirm('确认要删除吗', async function (index) {
        const id = e.target.dataset.id
        console.log(id);
        const data = await axios.get('/ydd_advpos/del', { params: { id } })
        console.log(data);
        if (data.data.errno) {
          return layer.msg(data.data.errmsg)
        }
        layer.msg('删除成功')
        layer.close(index)
        getAdv()
      })

    }
  })